﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>弹框</title>
    <link href="css/m/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/m/common.css"/>
    <link rel="stylesheet" href="css/m/activeDialog.css" />
</head>
<body>
	<!--遮罩层-->
	<div class="mui-popup-backdrop mui-active"></div>
	<!--视频分享 - 预约--激活-->
	<div class="predictLive mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="title">预约直播</div>
			<div class="btns">
				<p class="buyBtn"><a class="br5" href="javascript:void(0);">付费预约<span class="price">￥19.9</span></a></p>
				<p class="othersWay">
					<a class="br5 coupon" href="javascript:void(0);">代金券</a>
					<a class="br5 group" href="javascript:void(0);">三人组团</a>
				</p>
			</div>
			<div class="detailMsg">
				<div class="detailTitle">活动详情</div>
				<div class="msg tal">
					<span class="dib">代金券</span>
					<p class="text">输入兑换码获得代金券后可免费观看。</p>
					<span class="dib">三人组团</span>
					<p class="text">成功邀请三个好友支持后，可获得免费入场券。</p>
				</div>
			</div>
		</div>
	</div>
	<!--视频分享 - 预约-->
	<div class="predictBuy mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="workerDetail">
				<div class="worker">
					<div class="workerPic br50 dib">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="workerMsg dib tal">
						<div class="nickName feb">路人甲</div>
						<div class="career">深夜-技术</div>
					</div>
				</div>
				<div class="description tal">
					<span>作者简介：</span>
					关于这个作者的个人简介关于这个作者的个人简介关于这个作者的个人简介关于这个作者的个人简介。
				</div>
			</div>
			<div class="courseMsg tal">
				<div class="courseTitle feb toe">大熊毛发制作视频教程</div>
				<div class="courseTime">直播时间：<span>2018.4.1&nbsp;16:00</span></div>
				<a class="br5 dib predict" href="javascript:void(0);">预约 </a>
			</div>
		</div>
	</div>
	<!--兑换代金券-->
	<div class="getCoupon mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="title">兑换代金券</div>
			<div class="inputBox">
				<span>输入兑换码</span>
				<input type="text" class="inputCode dib"/>
				<a class="br5" href="javasript:void(0);">确定</a>
			</div>
			<div class="alreadyHave tal">
				<div class="text">已有代金券</div>
				<div class="couponList">
					<!--缺省提示-->
					<div class="emptyInfo tac dn">
						<div class="icon"></div>
						<div class="info">暂无代金券</div>
					</div>
					<div class="couponBox">
						<div class="coupon pr">
							<span class="br50 pa num">2</span>
							<div class="msg">
								<div class="courseTitle toe">《大熊毛发制作》</div>
								<div class="timeLimit toe">2018.3.30-2018.4.30</div>
							</div>
							<div class="pa calssify">预约</div>
						</div>
						<div class="coupon pr">
							<span class="br50 pa num">1</span>
							<div class="msg">
								<div class="courseTitle toe">《无间狱插画》</div>
								<div class="timeLimit toe">2018.3.30-2018.4.30</div>
							</div>
							<div class="pa calssify">已使用</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--兑换代金券预约成功-->
	<div class="getCouponComplete mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="title">恭喜你兑换并预约成功</div>
			<div class="info">
				<i class="fa fa-smile-o"></i>
				还将额外赠送你三张代金券
			</div>
			<div class="coupon pr">
				<span class="num tac db br50 pa">3</span>
				<div class="course">
					<div class="courseTitle toe">《大熊毛发制作》</div>
					<div class="timeLimit toe">2018.3.30-2018.4.30</div>
				</div>
			</div>
			<div class="infos tal">
					将在本次直播代金券分享给三个好友，好友领取后，你将获得<span class="courseTitle">《大熊毛发制作》</span>直播代金券一张
			</div>
			<div class="list">
				<div class="item clearfix">
					<div class="userPic fl br50">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="fl text">
						<span class="userName">路人甲</span>
						刚刚获得了
						<span class="courseTitle">《大熊毛发制作》</span>
						代金券
					</div>
				</div>
				<div class="item clearfix">
					<div class="userPic fl br50">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="fl text">
						<span class="userName">路人甲</span>
						刚刚获得了
						<span class="courseTitle">《大熊毛发制作》</span>
						代金券
					</div>
				</div>
			</div>
			<div class="tips">
				点击右上角按钮选择分享<br/>再次进入内容详情页面可查看分享进度。
			</div>
		</div>
	</div>
	<!--付费预约成功-->
	<div class="payComplete mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="icon">
				<img src="img/m/icons/complete.png" alt="" />
			</div>
			<div class="tips feb">付费预约成功</div>
			<div class="timeInfo">
				<div class="text">距离直播开始有</div>
				<div class="timeLimit"><span class="day">3</span>天<span class="hour">4</span>小时<span class="minutes">30</span>分
				</div>
			</div>
		</div>
	</div>
	<!--成功领取代金券-->
	<div class="receiveCoupon mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="icon">
				<img src="img/m/icons/complete.png" alt="" />
			</div>
			<div class="tips feb">成功领取代金券</div>
			<div class="timeInfo">
				<div class="text"><span>5s</span>即将跳转预约窗口</div>
			</div>
		</div>
	</div>
	<!--我的代金券-->
	<div class="myCoupon mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="title">我的代金券</div>
			<div class="couponList">
				<a class="db pr coupon" href="javascript:void(0);">
					<span class="pa num br50">2</span>
					<div class="courseMsg tal">
						<div class="courseTitle toe">《无间狱插画》</div>
						<div class="timeLimit toe">2018.4.10-2018.10.10</div>
					</div>
					<div class="pa text">已使用</div>
				</a>
				<a class="db pr coupon" href="javascript:void(0);">
					<span class="pa num br50">2</span>
					<div class="courseMsg tal">
						<div class="courseTitle toe">《无间狱插画》</div>
						<div class="timeLimit toe">2018.4.10-2018.10.10</div>
					</div>
					<div class="pa text">预约</div>
				</a>
			</div>
		</div>
	</div>
	<!--代金券--二维码关注-->
	<div class="weChatCode mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="weChat">
				<img src="img/m/icons/wechatCode.png" alt="" />
			</div>
			<div class="textBox">
				<div class="text">长按二维码关注</div>
				<div class="tips">关注深夜研习社订阅号，每周领取一张代金券</div>
			</div>
		</div>
	</div>
	<!--代金券分享-->
	<div class="couponShare mui-popup mui-po pup-in">
		<div class="mainContent tac mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="workerMsg">
				<div class="br50 userPic">
					<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
				</div>
				<div class="toe nickName">路人甲</div>
				<div class="description tal">
					我是<span class="nickName">路人甲</span>，我预约一堂活动课程《大狗熊毛发制作》中文教程直播课，现赠送你一张免费活动代金券，可入场免费观看。
				</div>
			</div>
			<a href="javascript:void(0);" class="coupon db pr">
				<div class="courseMsg tal">
					<div class="courseTitle toe">《大狗熊毛发制作》</div>
					<div class="timeLimit toe">2018.4.10-2018.10.10</div>
				</div>
				<div class="pa text">已领取</div>
			</a>
			<a href="javascript:void(0);" class="dib br5 moreCoupon">更多代金券</a>
		</div>
	</div>
	<!--代金券赠送完毕-->
	<div class="sendCoupon mui-popup mui-po pup-in">
		<div class="mainContent mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="infos clearfix tal">
				<div class="courseInfo fl">
					<div class="courseTitle toe feb">《大熊毛发制作》</div>
					<div class="text">三张代金券已赠送完</div>
				</div>
				<div class="mark fl">
					<i class="fa fa-check"></i>
				</div>
			</div>
			<div class="tips">你将获得一张<span>《无间狱插画》</span>代金券</div>
			<div class="coupon">
				<div class="courseMsg tal">
					<div class="courseTitle toe">《无间狱插画》</div>
					<div class="timeLimit toe">2018.4.26-2018.12.26</div>
				</div>
			</div>
			<a href="javascript:void(0);" class="dib br5 confirm">确定</a>
		</div>
	</div>
	<!--视频分享--三人组团-->
	<div class="groupSahre mui-popup mui-po pup-in">
		<div class="mainContent mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="workerMsg">
				<div class="br50 userPic">
					<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
				</div>
				<div class="toe nickName">路人甲</div>
				<div class="description tal">
					我是<span class="nickName">路人甲</span>，我正在预约《大狗熊毛发制作》中文教程直播课，需要三人支持我，分享给朋友支持你。
				</div>
			</div>
			<div class="progressBox">
				<div class="progressInfo pr">
					<div class="text pa">0%</div>
				</div>
				<div class="mui-progressbar">
					<span></span>
				</div>
			</div>
			<div class="btns">
				<a class="br5 dib support" href="javscript:void(0);">支持</a>
				<a class="br5 dib join" href="javscript:void(0);">我也参加</a>
			</div>
			<div class="supportList">
				<!--缺省提示-->
				<div class="emptyInfo tac dn">暂时无人支持你</div>
				<div class="supporter clearfix d n">
					<div class="br50 userPic fl">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="infos fl"><span class="nickName">路人甲</span>支持了你</div>
				</div>
				<div class="supporter clearfix d n">
					<div class="br50 userPic fl">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="infos fl"><span class="nickName">路人甲</span>支持了你</div>
				</div>
			</div>
			<a class="db pr coupon" href="javascript:void(0);">
				<div class="courseMsg tal">
					<div class="courseTitle toe">《无间狱插画》</div>
					<div class="timeLimit toe">2018.4.10-2018.10.10</div>
				</div>
				<div class="pa text">已使用</div>
			</a>
			<div class="tips">点击右上角按钮选择分享要支持你的人</div>
		</div>
	</div>
	<!-- 预约成功查看分享进度 -->
	<div class="checkProgress mui-popup mui-popup-in">
		<div class="mainContent mui-popup-inner">
			<div class="pa close">
				<i class="fa fa-close"></i>
			</div>
			<div class="workerMsg">
				<div class="worker">
					<div class="workerDetail">
						<div class="workerPic br50 dib">
							<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
						</div>
						<div class="textBox dib tal">
							<div class="feb nickName">路人甲</div>
							<div class="career">深夜-技术</div>
						</div>
						<div class="description">
							<span>作者简介：</span>关于这个作者的自我介绍关于这个作者的自我介绍关于这个作者的自我介绍关于这个作者的自我介绍关于这个作者的自我介绍关于这个作者的自我介绍
						</div> 
					</div>
					<div class="courseMsg tal">
						<div class="courseTitle feb toe">大熊毛发制作视频教程</div>
						<div class="timeLimit">直播时间：<span>2018.4.21&nbsp;16:00</span></div>
					</div>
				</div>
			</div>
			<div class="progressBox">
				<div class="text tal">分享进度</div>
				<div class="progress dib">
					<div class="progressInfo pr">
						<div class="text pa">0%</div>
					</div>
					<div class="mui-progressbar">
						<span></span>
					</div>
				</div>
				<div class="dib shareBtn">
					<a href="javascript:void(0);" class="db br5">分享</a>
				</div>
			</div>
			<div class="infos tal">
				<div class="info">分享完成后可领取一张<span class="courseTitle">《无间狱插画》</span>代金券</div>
				<div class="tips">点击右上角按钮选择分享</div>
			</div>
			<div class="receiveList">
				<!--缺省提示-->
				<div class="emptyInfo tac dn">暂时无人领取代金券</div>
				<div class="receive clearfix">
					<div class="userPic br50 fl">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="text fl tal">
						<span class="nickName">路人甲</span>领取了你分享的代金券
					</div>
				</div>
				<div class="receive clearfix">
					<div class="userPic br50 fl">
						<img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="" />
					</div>
					<div class="text fl tal">
						<span class="nickName">路人甲</span>领取了你分享的代金券
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
